import React, { useEffect, useState } from "react";
import "./index.less";
import { List } from "antd";
import { TAnnouncements } from "./type";
interface IBulletinBoardProps {
  announcements: TAnnouncements[];
  handleChange: (current: number) => void;
  pagination: {
    total: number;
    pageSize: number;
    current: number;
  };
  editorNotice?: (id: number) => void;
  deleteNotice?: (id: number) => void;
  getBBData: () => void;
  isShow?: boolean;
}
const BulletinBoard: React.FC<IBulletinBoardProps> = ({
  announcements,
  pagination,
  editorNotice,
  getBBData,
  handleChange,
  deleteNotice,
  isShow = true,
}) => {
  useEffect(() => {
    getBBData();
  }, [pagination.current, pagination.total]);
  return (
    <div className="ctn">
      <List
        size="small"
        header={<div>公告栏</div>}
        bordered
        dataSource={announcements}
        renderItem={(item) => (
          <List.Item className="list-item">
            <span className="list-item-ctn">{item.content}</span>
            <span>{item.updateTime}</span>
            {isShow ? (
              <div className="list-item-btn">
                <a onClick={() => editorNotice?.(item.id)}>编辑</a>
                <a onClick={() => deleteNotice?.(item.id)}>删除</a>
              </div>
            ) : null}
          </List.Item>
        )}
        pagination={{
          total: pagination.total,
          pageSize: pagination.pageSize,
          current: pagination.current,
          showSizeChanger: false,
          hideOnSinglePage: true,
          onChange: handleChange,
        }}
      />
    </div>
  );
};
export default BulletinBoard;
